<template>
  <d2-container>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="饿了么活动" name="first" style="display:flex;flex-direction: column;">
        <el-card>
          <el-form :model="ruleForm" ref="ruleForm" style="display:flex;margin-left:5%">
            <div style="display:flex;flex-direction: column;">
              <el-form-item label="发布平台：" style="display:flex;">
                <el-select clearable v-model="ruleForm.platFrom" placeholder="请选择发布平台">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-select clearable v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格：　　" style="display:flex;" v-show="ruleForm.type == 1">
                <el-input type="number" v-model.number="ruleForm.price" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="关键词：　" style="display:flex;">
                <el-input type="text" v-model="ruleForm.key_word" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="上传主图：">
                <el-upload
                  class="avatar-uploader"
                  action="/api/va/cooperationrecharge/bankcardimg"
                  :headers="importHeaders"
                  v-if="ruleForm.img==''"
                  multiple
                  :limit="1"
                  :on-success="handleSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div v-if="ruleForm.img!=''" style="display:flex;">
                  <viewer>
                    <img :src="ruleForm.img" style="width:100px;height:100px;border-radius:10px;" alt="">
                  </viewer>
                  <i class="el-icon-error" @click="handleRemove"></i>
                </div>
              </el-form-item>
            </div>
            <div style="display:flex;flex-direction: column;margin-left:10%;">
              <el-form-item label="任务要求：" style="display:flex;">
                <el-input type="text" placeholder="请输入任务要求" v-model="ruleForm.task_requirement"></el-input>
              </el-form-item>
              <el-form-item label="ID或标题：" style="display:flex;">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-input type="text" placeholder="请输入宝贝ID或标题" v-model="ruleForm.link"></el-input>
                  <el-tooltip class="item" effect="dark" content="购买的话就写宝贝ID,其他可以写标题" placement="top-start">
                    <i class="el-icon-question" style="height:20px;margin:10px;"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="任务总数：" style="display:flex;">
                <el-input type="number" placeholder="请输入任务总数" v-model.number="ruleForm.task_count"></el-input>
              </el-form-item>
              <el-form-item label="商家提示：" style="display:flex;">
                <el-input v-model="ruleForm.shoptips" type="textarea" placeholder="给刷手的提示等等"
                          style="width: 220px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-left:5%;">
            <el-button type="primary" @click="adminother">确认</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="美团活动" name="third">
        <el-card>
          <el-form :model="ruleForm" ref="ruleForm" style="display:flex;margin-left:5%">
            <div style="display:flex;flex-direction: column;">
              <el-form-item label="发布平台：" style="display:flex;">
                <el-select clearable v-model="ruleForm.platFrom" placeholder="请选择发布平台">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-select clearable v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格：　　" style="display:flex;" v-show="ruleForm.type == 1">
                <el-input type="number" v-model.number="ruleForm.price" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="关键词：　" style="display:flex;">
                <el-input type="text" v-model="ruleForm.key_word" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="上传主图：">
                <el-upload
                  class="avatar-uploader"
                  action="/api/va/cooperationrecharge/bankcardimg"
                  :headers="importHeaders"
                  v-if="ruleForm.img==''"
                  multiple
                  :limit="1"
                  :on-success="handleSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div v-if="ruleForm.img!=''" style="display:flex;">
                  <viewer>
                    <img :src="ruleForm.img" style="width:100px;height:100px;border-radius:10px;" alt="">
                  </viewer>
                  <i class="el-icon-error" @click="handleRemove"></i>
                </div>
              </el-form-item>
            </div>
            <div style="display:flex;flex-direction: column;margin-left:10%;">
              <el-form-item label="任务要求：" style="display:flex;">
                <el-input type="text" placeholder="请输入任务要求" v-model="ruleForm.task_requirement"></el-input>
              </el-form-item>
              <el-form-item label="ID或标题：" style="display:flex;">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-input type="text" placeholder="请输入宝贝ID或标题" v-model="ruleForm.link"></el-input>
                  <el-tooltip class="item" effect="dark" content="购买的话就写宝贝ID,其他可以写标题" placement="top-start">
                    <i class="el-icon-question" style="height:20px;margin:10px;"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="任务总数：" style="display:flex;">
                <el-input type="number" placeholder="请输入任务总数" v-model.number="ruleForm.task_count"></el-input>
              </el-form-item>
              <el-form-item label="商家提示：" style="display:flex;">
                <el-input v-model="ruleForm.shoptips" type="textarea" placeholder="给刷手的提示等等"
                          style="width: 220px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-left:5%;">
            <el-button type="primary" @click="adminother">确认</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="大麦活动" name="fourth">
        <el-card>
          <el-form :model="ruleForm" ref="ruleForm" style="display:flex;margin-left:5%">
            <div style="display:flex;flex-direction: column;">
              <el-form-item label="发布平台：" style="display:flex;">
                <el-select clearable v-model="ruleForm.platFrom" placeholder="请选择发布平台">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-select clearable v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格：　　" style="display:flex;" v-show="ruleForm.type == 1">
                <el-input type="number" v-model.number="ruleForm.price" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="关键词：　" style="display:flex;">
                <el-input type="text" v-model="ruleForm.key_word" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="上传主图：">
                <el-upload
                  class="avatar-uploader"
                  action="/api/va/cooperationrecharge/bankcardimg"
                  :headers="importHeaders"
                  v-if="ruleForm.img==''"
                  multiple
                  :limit="1"
                  :on-success="handleSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div v-if="ruleForm.img!=''" style="display:flex;">
                  <viewer>
                    <img :src="ruleForm.img" style="width:100px;height:100px;border-radius:10px;" alt="">
                  </viewer>
                  <i class="el-icon-error" @click="handleRemove"></i>
                </div>
              </el-form-item>
            </div>
            <div style="display:flex;flex-direction: column;margin-left:10%;">
              <el-form-item label="任务要求：" style="display:flex;">
                <el-input type="text" placeholder="请输入任务要求" v-model="ruleForm.task_requirement"></el-input>
              </el-form-item>
              <el-form-item label="ID或标题：" style="display:flex;">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-input type="text" placeholder="请输入宝贝ID或标题" v-model="ruleForm.link"></el-input>
                  <el-tooltip class="item" effect="dark" content="购买的话就写宝贝ID,其他可以写标题" placement="top-start">
                    <i class="el-icon-question" style="height:20px;margin:10px;"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="任务总数：" style="display:flex;">
                <el-input type="number" placeholder="请输入任务总数" v-model.number="ruleForm.task_count"></el-input>
              </el-form-item>
              <el-form-item label="商家提示：" style="display:flex;">
                <el-input v-model="ruleForm.shoptips" type="textarea" placeholder="给刷手的提示等等"
                          style="width: 220px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-left:5%;">
            <el-button type="primary" @click="adminother">确认</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="大众点评" name="fifth">
        <el-card>
          <el-form :model="ruleForm" ref="ruleForm" style="display:flex;margin-left:5%">
            <div style="display:flex;flex-direction: column;">
              <el-form-item label="发布平台：" style="display:flex;">
                <el-select clearable v-model="ruleForm.platFrom" placeholder="请选择发布平台">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-select clearable v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格：　　" style="display:flex;" v-show="ruleForm.type == 1">
                <el-input type="number" v-model.number="ruleForm.price" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="关键词：　" style="display:flex;">
                <el-input type="text" v-model="ruleForm.key_word" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="上传主图：">
                <el-upload
                  class="avatar-uploader"
                  action="/api/va/cooperationrecharge/bankcardimg"
                  :headers="importHeaders"
                  v-if="ruleForm.img==''"
                  multiple
                  :limit="1"
                  :on-success="handleSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div v-if="ruleForm.img!=''" style="display:flex;">
                  <viewer>
                    <img :src="ruleForm.img" style="width:100px;height:100px;border-radius:10px;" alt="">
                  </viewer>
                  <i class="el-icon-error" @click="handleRemove"></i>
                </div>
              </el-form-item>
            </div>
            <div style="display:flex;flex-direction: column;margin-left:10%;">
              <el-form-item label="任务要求：" style="display:flex;">
                <el-input type="text" placeholder="请输入任务要求" v-model="ruleForm.task_requirement"></el-input>
              </el-form-item>
              <el-form-item label="ID或标题：" style="display:flex;">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-input type="text" placeholder="请输入宝贝ID或标题" v-model="ruleForm.link"></el-input>
                  <el-tooltip class="item" effect="dark" content="购买的话就写宝贝ID,其他可以写标题" placement="top-start">
                    <i class="el-icon-question" style="height:20px;margin:10px;"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="任务总数：" style="display:flex;">
                <el-input type="number" placeholder="请输入任务总数" v-model.number="ruleForm.task_count"></el-input>
              </el-form-item>
              <el-form-item label="商家提示：" style="display:flex;">
                <el-input v-model="ruleForm.shoptips" type="textarea" placeholder="给刷手的提示等等"
                          style="width: 220px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-left:5%;">
            <el-button type="primary" @click="adminother">确认</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="小红书" name="sixth">
        <el-card>
          <el-form :model="ruleForm" ref="ruleForm" style="display:flex;margin-left:5%">
            <div style="display:flex;flex-direction: column;">
              <el-form-item label="发布平台：" style="display:flex;">
                <el-select clearable v-model="ruleForm.platFrom" placeholder="请选择发布平台">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-select clearable v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格：　　" style="display:flex;" v-show="ruleForm.type == 1">
                <el-input type="number" v-model.number="ruleForm.price" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="关键词：　" style="display:flex;">
                <el-input type="text" v-model="ruleForm.key_word" placeholder="请选择关键词"></el-input>
              </el-form-item>
              <el-form-item label="上传主图：">
                <el-upload
                  class="avatar-uploader"
                  action="/api/va/cooperationrecharge/bankcardimg"
                  :headers="importHeaders"
                  v-if="ruleForm.img==''"
                  multiple
                  :limit="1"
                  :on-success="handleSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div v-if="ruleForm.img!=''" style="display:flex;">
                  <viewer>
                    <img :src="ruleForm.img" style="width:100px;height:100px;border-radius:10px;" alt="">
                  </viewer>
                  <i class="el-icon-error" @click="handleRemove"></i>
                </div>
              </el-form-item>
            </div>
            <div style="display:flex;flex-direction: column;margin-left:10%;">
              <el-form-item label="任务要求：" style="display:flex;">
                <el-input type="text" placeholder="请输入任务要求" v-model="ruleForm.task_requirement"></el-input>
              </el-form-item>
              <el-form-item label="ID或标题：" style="display:flex;">
                <div style="width:100%;display:flex;justify-content: center;">
                  <el-input type="text" placeholder="请输入宝贝ID或标题" v-model="ruleForm.link"></el-input>
                  <el-tooltip class="item" effect="dark" content="购买的话就写宝贝ID,其他可以写标题" placement="top-start">
                    <i class="el-icon-question" style="height:20px;margin:10px;"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="任务总数：" style="display:flex;">
                <el-input type="number" placeholder="请输入任务总数" v-model.number="ruleForm.task_count"></el-input>
              </el-form-item>
              <el-form-item label="商家提示：" style="display:flex;">
                <el-input v-model="ruleForm.shoptips" type="textarea" placeholder="给刷手的提示等等"
                          style="width: 220px;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-left:5%;">
            <el-button type="primary" @click="adminother">确认</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="任务列表" name="second">
        <!--        <el-collapse v-model="activeNames">-->
        <!--          <el-collapse-item title="一致性 Consistency" name="1">-->
        <div v-for="i in tableData">
          <div style="width:100%;background:rgb(238,238,238);display:flex;align-items: center;">
          <span style="display:flex;align-items: center;height:50px;margin-left:10px;">平台类型:
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/elm.png"
                 v-show="i.platform_type == 1" alt="">
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/dm.png"
                 v-show="i.platform_type == 2" alt="">
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/dzdp.png"
                 v-show="i.platform_type == 3" alt="">
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/mt.png"
                 v-show="i.platform_type == 4" alt="">
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/xhs.png"
                 v-show="i.platform_type == 5" alt="">
            <img style="width:25px;height:25px;margin-left:10px;" src="../../../assets/mt.png"
                 v-show="i.platform_type == 4" alt="">
          </span>
            <span style="margin-left:1%;">{{ i.create_time }}</span>
            <div style="margin-left:20px;color:red;">
              <span v-show="i.task_status == 1" style="color:#00cca3;">进行中</span>
              <span v-show="i.task_status == 2">已过期</span>
              <span v-show="i.task_status == 3">已完成</span>
              <span v-show="i.task_status == 4" style="color:red;">已停止</span>
            </div>
            <div style="margin-left:8%;display:flex;align-items: center;">
              <span>任务总数:{{ i.task_count }}</span>
              <div style="width:2px;height:20px;background:rgb(134,49,51);margin-left:10px;margin-right:10px;"></div>
              <span>任务ID：{{ i.task_id }}</span>
              <div style="width:2px;height:20px;background:rgb(134,49,51);margin-left:10px;margin-right:10px;"></div>
              <span>支付ID：{{ i.cooperation_pay_id }}</span>
            </div>
            <div style="margin-left:2%;">
              <el-button type="primary">查看详情</el-button>
              <el-button style="color: red" v-if="i.task_status === 3" type="text">已结清</el-button>
              <el-button type="danger" @click="switchTaskStatus(1,i)" v-if="i.task_status === 1">停止任务</el-button>
            </div>
          </div>
          <div style="width:100%;display:flex;border:1px solid #bababa;align-items: center;">
            <viewer>
              <img :src="i.picture_address" style="width:80px;height:80px;margin:10px;" alt="">
            </viewer>
            <div style="display:flex;flex-direction: column;height:80px;justify-content: space-around;margin-left:1%">
              <el-tooltip class="item" effect="dark" :content="i.link" placement="top-start">
                <span style="width:250px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">标题:{{
                    i.link
                  }}</span>
              </el-tooltip>
              <span
                style="width:250px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">关键词:{{
                  i.key_word
                }}</span>
              <span>任务日期:{{ i.create_time }}</span>
            </div>
            <div style="margin-left:9%;display:flex;align-items: center;">
              <div style="width:2px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
              <div>任务类型：
                <span style="color:#ec0c36;" v-if="i.task_type == 1">购买</span>
                <span style="color:#ec0c36;" v-if="i.task_type == 2">点赞</span>
                <span style="color:#ec0c36;" v-if="i.task_type == 3">评价</span>
                <span style="color:#ec0c36;" v-if="i.task_type == 4">浏览</span>
                <span style="color:#ec0c36;" v-if="i.task_type == 5">问大家（问）</span>
                <span style="color:#ec0c36;" v-if="i.task_type == 6">问大家（答）</span>
              </div>
            </div>
            <div style="display:flex;align-items: center;">
              <div style="width:1.5px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
              <el-tooltip class="item" effect="dark" content="单子还未放出来" placement="top-start">
                <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">未放出：{{
                    i.task_count - i.conducttk
                  }}</span>
              </el-tooltip>
            </div>
            <div style="display:flex;align-items: center;">
              <div style="width:2px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
              <el-tooltip class="item" effect="dark" content="买手还没有接的单子" placement="top-start">
                <span>待接单：{{ i.task_count - i.conducttk }}</span>
              </el-tooltip>
            </div>
            <div style="display:flex;align-items: center;">
              <div style="width:1.5px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
              <el-tooltip class="item" effect="dark" content="买手正在做的单子" placement="top-start">
                <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">进行中：{{
                    i.conducttk
                  }}</span>
              </el-tooltip>
              <div style="width:1.5px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
            </div>
            <div style="display:flex;align-items: center;">
              <el-tooltip class="item" effect="dark" content="买手已经完成的单子" placement="top-start">
                <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">已完成：{{
                    i.overtk
                  }}</span>
              </el-tooltip>
              <div style="width:2px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
            </div>
            <div style="display:flex;align-items: center;">
              <el-tooltip class="item" effect="dark" :content="i.task_requirement" placement="top-start">
                <span style="width:250px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">任务要求：{{
                    i.task_requirement
                  }}</span>
              </el-tooltip>
              <div style="width:2px;height:30px;background:#bababa;margin-left:10px;margin-right:10px;"></div>
            </div>
          </div>
        </div>
        <!--          </el-collapse-item>-->
        <!--        </el-collapse>-->
      </el-tab-pane>
      <el-pagination @current-change="handleChange" :current-page.sync="ruleForm.page" background
                     style="text-align:right;margin-top:10px;"
                     :page-size="ruleForm.page_size" layout="total, prev, pager, next" :total="ruleForm.total">
      </el-pagination>
    </el-tabs>
    <el-dialog
      title="视频实例"
      :visible.sync="dialogvideo"
      width="60%">
      <video-player
        ref="videoPlayer"
        class="video-player vjs-custom-skin"
        :playsinline="true"
        :options="playerOptions"
      />
    </el-dialog>
  </d2-container>
</template>

<script>
import {deduction, extraList, updatetasklist, extra_operation} from "@/api/api";

export default {
  name: "index",
  computed: {
    player() {
      return this.$refs.videoPlayer.player//自定义播放
    }
  },
  data() {
    return {
      options: [
        {value: 1, label: "饿了么"},
        {value: 2, label: "大麦"},
        {value: 3, label: "大众点评"},
        {value: 4, label: "美团"},
        {value: 5, label: "小红书"},
        {value: 6, label: "淘宝"},
      ],
      tableData: [],
      activeName: "first",
      ruleForm: {
        platFrom: "",
        key_word: "",
        group: "c",
        type: "",
        img: "",
        acttime: "",
        task_count: 0,
        shoptips: "",
        total: "",
        price: 0,
        link: "",
        task_requirement: "",
        page: 1,
        page_size: 10,
        begin_time: "",
        end_time: ""
      },
      tasknum: 1,
      playerOptions: {
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: require('../../../assets/llorder.mp4') // url地址
          }
        ],
        hls: true,
        poster: '', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      dialogvideo: false,
      importHeaders: {token: JSON.parse(localStorage.getItem('token'))},
      options_account: [],
      options_type: [
        {
          label: "购买",
          value: 1
        },
        {
          label: "点赞",
          value: 2
        },
        {
          label: "评论",
          value: 3
        },
        {
          label: "浏览",
          value: 4
        },
        {
          label: "问大家(问)",
          value: 5
        },
        {
          label: "问大家(答)",
          value: 6
        },
      ],
    }
  },
  methods: {
    handleClick() {

    },
    handleChange(val) {
      this.ruleForm.page = val
      this.extraLists()
    },
    switchTaskStatus(a, b) {
      let title;
      let _this = this;
      a === 1
        ? (title = "确认任务 " + b.id + " 状态更新为暂停?")
        : (title = "确认任务 " + b.id + " 状态更新为正常?");
      _this
        .$confirm(title, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          let params = {
            id: b.id,
          }
          extra_operation(params).then(res => {
            if (res.Status == 200) {
              _this.$message({
                type: 'success',
                message: res.Message
              });
              _this.extraLists()
            } else {
              _this.$message({
                type: 'info',
                message: res.Message
              });
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    extraLists() {
      let params = {
        page: this.ruleForm.page,
        page_size: this.ruleForm.page_size,
        link: "",
        begin_time: this.ruleForm.begin_time,
        end_time: this.ruleForm.end_time
      }
      extraList(params).then((res) => {
        console.log(res);
        if (res.Status == 200) {
          this.ruleForm.total = res.Count
          this.tableData = res.Data.sort()
        } else {
          this.$message({
            type: "error",
            message: res.Message
          })
        }
      })
    },
    adminother() {
      if (this.ruleForm.task_count <= 0) {
        this.$message({
          type: 'error',
          message: '请先填写任务数量'
        })
      } else {
        this.$confirm('确认发布任务数为' + this.ruleForm.task_count + '单', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.deductions()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //额外任务
    deductions() {
      let params = {
        task_type: this.ruleForm.type,//任务类型1.购买，2.点赞 3.评价 4.浏览 5.问大家（问）6.问大家（答）
        key_word: this.ruleForm.key_word,//关键词
        tips_info: this.ruleForm.shoptips,//提示
        picture_address: this.ruleForm.img,//无线图地址
        task_requirement: this.ruleForm.task_requirement,//任务要求
        task_count: this.ruleForm.task_count,//任务总数
        platform_type: this.ruleForm.platFrom,//平台类型1.饿了么 ，2.大麦 3.大众 4.美团 5.小红书
        price: this.ruleForm.price,//单价
        link: this.ruleForm.link//商品就写宝贝id，文章就写标题
      }
      deduction(params).then((res) => {
        if (res.Status == 200) {
          this.$message({
            type: "success",
            message: res.Message
          })
          this.extraLists()
        } else {
          this.$message({
            type: "error",
            message: res.Message
          })
        }
      })
    },
    handleSuccess(res) {
      this.ruleForm.img = res.UrlImg
    },
    handleRemove() {
      this.ruleForm.img = ''
    }
  },
  created() {
    this.extraLists()
  }
}
</script>

<style lang="scss">
.el-textarea__inner {
  height: 150px;
}

.messages {
  .el-form-item__label {
    opacity: 0;
  }
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.el-textarea__inner {
  height: 150px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
